<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>

<head>
    <meta charset="UTF-8">
    <title>搜索结果</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script language="JavaScript" src="js/search_result.js"></script>
    <script type="text/javascript">
        //        页头下拉表部分的函数 务必加入！
        $(document).ready(function () {
            $("#settingList").mouseleave(function () {
                $("#settingList").hide();
            });
        });
        function showList() {
            $("#settingList").show();
        }
    </script>
    <style>
        /*页头部分 勿改*/
        /*设置div背景色为white*/
        /*以下部分和页脚部分统一*/
        html {
            height: 100%;
            margin: 0;
        }

        body {
            height: 100%;
            margin: 0;
            background-color: #f4fdfc;
        }

        a {
            text-decoration: none
        }

        .whole-container {
            min-height: 100%;
        }
        .theContainer{
            min-height: 100%;
            height: 100%;
        }
        .banner {
            z-index: 999;
            width: 100%;
            height: 70px;
            top: 0;
            left: 0;
            position: fixed;
            overflow: hidden;
            border-bottom: 1px solid rgba(30, 35, 42, .06);
            box-shadow: 0 1px 3px 0 rgba(0, 34, 77, .05);
            background-clip: content-box;
            background-color: white;
            filter: alpha(Opacity=50);
            opacity: 0.95;
        }

        #logo {
            margin-top: 11px;
            margin-left: 42px;
            width: 115px;
            height: 46px;

        }

        .searchDiv {
            position: absolute;
            top: 15px;
            left: 182px;
            height: 35px;
            width: 224px;
            -webkit-border-radius: 3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
        }

        .searchDiv:hover {
            -webkit-border-radius: 3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #00e6d0;
            color: #00e6d0;

        }

        #search {
            float: left;
            margin-top: 1.4px;
            width: 185px;
            height: 30px;
            border: 0;
            background-color: transparent;
            font: 13px 微软雅黑;
        }

        #btnLeft {
            margin-left: 30px;
            width: 255px;
            position: absolute;
            right: 12.6%;
            top: 20px;
        }

        #searchicon {
            background: no-repeat;
            background-image: url("img/搜索.png");
            background-size: 25px 25px;
            float: right;
            margin-top: 3.5px;
            width: 28px;
            height: 28px;
        }

        #searchicon:hover {
            background-image: url("img/搜索hover.png");
        }

        #settingIcon {
            background-image: url("img/设置.png");
            background-size: 25px 25px;
            margin-top: 5px;
            float: right;
            width: 25px;
            height: 25px;
        }

        #settingIcon:hover {
            background-image: url("img/设置focus.png");
        }

        #settingList {
            background: no-repeat;
            background-image: url("img/下拉框.png");
            background-size: 155px 120px;
            filter: alpha(Opacity=50);
            opacity: 0.95;
            position: fixed;
            top: 40px;
            right: 11.8%;
            overflow: hidden;
            z-index: 99999;
            width: 155px;
            height: 120px;
            display: none;
        }

        #accountSetting, #changePersonalSetting, #logout {
            list-style: none;
            font: 13px 微软雅黑;
        }

        #accountSetting:hover, #changePersonalSetting:hover, #logout:hover {
            font: 13px 微软雅黑;
        }

        #accountSetting {
            margin-top: 10px;
        }

        #changePersonalSetting {
            margin-top: 35px;
        }

        #logout {
            margin-top: 10px;
        }

        #hpBtn {
            margin-right: 7px;
            width: 100px;
            height: 35px;
            border: none;
            background-color: #93e3e0;
            font: normal 15px 微软雅黑;
            color: #ffffff;
            float: right;
        }

        #hpBtn:hover {
            box-shadow: 0px 0 5px #00e6d0;
            background-color: #00e6d0;
        }

        #ppBtn {
            margin-right: 7px;
            float: right;
            width: 100px;
            height: 35px;
            border: none;
            background-color: #93e3e0;
            font: normal 15px 微软雅黑;
            color: #ffffff;
        }

        #ppBtn:hover {
            box-shadow: 0px 0 5px #00e6d0;
            background-color: #00e6d0;
        }

        /*页脚*/
        footer {
            position: relative;
            bottom: 0;
            width: 100%;
            height: 60px;
            clear: both;
            padding-top: 20px;
            padding-bottom: 0;
        }

        #footer {
            text-align: center;
            background-color: white;
            height: 40px;
            width: 100%;
            margin-top: 20px;
            overflow: hidden;
            box-shadow: 0 1px 3px 0 rgba(0, 34, 77, .05);
            background-clip: content-box;
        }

        #footText {
            height: 20px;
            margin: 5px auto;
        }

        /*主界面*/
        .main {
            background-color: transparent;
            margin: 90px auto;
            margin-left: 12.6%;
            width: 986px;
            height: auto;
        }

        hr {
            width: 95%;
        }

        /*左侧帖子搜索结果*/
        .left {
            margin-top: 20px;
            float: left;
            width: 670px;
            height: auto;
        }

        a {
            text-decoration: none
        }

        a:link {
            color: #333333;
        }

        a:visited {
            color: #333333;
        }

        a:hover {
            color: #666666;
        }

        .postsResult {
            background: transparent;
            width: 98%;
            height: auto;
            padding-top: 2px;
            margin-top: 10px;
            border-radius: 3px;
        }

        .userInfo{
            margin-top:10px;
            margin-left:10px;
            width:100%;
        }
        .userImage{
            position: relative;
            top:10px;
            border: 3px solid aliceblue;
            border-radius:50%;
        }
        .userText{
            position: relative;
            width:240px;
            margin-left:60px;
            margin-top:-50px;
        }
        .userName{
            position: relative;
            top:5px;
            font: normal 18px 微软雅黑 ;
        }
        .signature {
            position: relative;
            top:-4px;
            font: normal 15px 微软雅黑;
            text-overflow: ellipsis;/*省略号*/
            overflow: hidden;/*超过的隐藏*/
            white-space: nowrap;/*不折行*/
            width:230px;
        }

        /*#pageChange{*/
            /*text-align: center;*/
            /*width: 338px;*/
            /*height: 20px;*/
            /*position: absolute;*/
            /*bottom: 15px;*/

        /*}*/
        .pageUp{
            position: relative;
            bottom: -1.5px;
            background-color: transparent;
            background-image: url("img/上一页.png");
            background-size: 20px 20px;
            width: 20px;
            height: 20px;
            border: none;
            outline: none;
        }
        .pageUp:hover{
            background-image: url("img/上一页hover.png");
        }
        .pageDown{
            position: relative;
            bottom: -1.5px;
            background-color: transparent;
            background-image: url("img/下一页.png");
            background-size: 20px 20px;
            width: 20px;
            height: 20px;
            border: none;
            outline: none;
        }
        .pageDown:hover{
            background-image: url("img/下一页hover.png");
        }
        .pageBtn{
            text-align: center;
            /*padding-right: 4px;*/
            padding-top: 1px;
            padding-bottom: 1px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: transparent;
            border: none;
            font: bold 13px 微软雅黑;
        }
        .pageBtn:hover{
            border-radius: 50%;
            background-color: #00e6d0;
            color: white;
        }
        .pageBtn:focus{
            outline: none;
            border-radius: 50%;
            background-color: #00e6d0;
            color: white;
        }



        /*.passage {*/
            /*margin-top: 10px;*/
            /*margin-left: 20px;*/
            /*width: 100%;*/
        /*}*/

        /*#passageName {*/
            /*position: relative;*/
            /*top: 18px;*/
            /*font: normal 18px 微软雅黑;*/
        /*}*/

        /*#date {*/
            /*position: relative;*/
            /*float: right;*/
            /*top: 10px;*/
            /*left: -40px;*/
            /*font: normal 13px 微软雅黑;*/
        /*}*/

        /*#passageMain {*/
            /*position: relative;*/
            /*word-wrap: break-word;*/
            /*word-break: normal;*/
            /*width: 94%;*/
            /*display: -webkit-box;*/
            /*-webkit-box-orient: vertical;*/
            /*-webkit-line-clamp: 3;*/
            /*overflow: hidden;*/
            /*font: normal 15px 微软雅黑;*/
        /*}*/

        /*.media-box {*/
            /*position: relative;*/
            /*top: 0;*/
            /*width: 340px;*/
            /*height: 120px;*/
        /*}*/

        /*#image1, #image2, #image3 {*/
            /*width: 110px;*/
            /*height: 110px;*/
        /*}*/

        /*右侧用户搜索结果*/
        .right {
            float: right;
            margin-top: 20px;
            width: 310px;
            height: auto;
        }

        .userResult {
            margin-top: 10px;
            padding-bottom: 1px;
            padding-top: 1px;
            background: white;
            width: 100%;
            height: auto;
            border-radius: 3px;
            box-shadow: 0 0 4px #999999;
        }

        .userInfo{
            margin-top:10px;
            margin-left:10px;
            width:100%;
        }
        .userImage{
            position: relative;
            top:10px;
            border: 3px solid aliceblue;
            border-radius:50%;
        }
        .userText{
            position: relative;
            width:240px;
            margin-left:60px;
            margin-top:-50px;
        }
        .userName{
            position: relative;
            top:5px;
            font: normal 18px 微软雅黑 ;
        }
        .signature {
            position: relative;
            top:-4px;
            font: normal 15px 微软雅黑;
            text-overflow: ellipsis;/*省略号*/
            overflow: hidden;/*超过的隐藏*/
            white-space: nowrap;/*不折行*/
            width:230px;
        }
            a{text-decoration:none}
    .container{
        background-color: white;
        /*如果帖子的宽度改变 只需要改这个宽度值*/
        width:660px;
        height:auto;
        border-radius: 3px;
        box-shadow:0 0 4px #999999;
        padding-bottom: 20px;
    }
    .firstRow{
        padding-top: 20px;
        margin-left: 20px;
        padding-bottom: 5px;
        width:95%;
        height:35px;
    }
    .publishUserImage{
        border: 2px solid aliceblue;
        border-radius:50%;
    }
    .publishUserName{
        position: relative;
        top:-5px;
        font: normal 13px 微软雅黑 ;

    }
    a:link {color:black;}
    a:visited {color:black;}
    .passage{
        margin-top: -20px;
        margin-left: 20px;
        width:100%;
    }
    .passageName{
        word-wrap: break-word;
        word-break: normal;
        width:95%;
        position: relative;
        top:18px;
        font: normal 18px 微软雅黑 ;
    }
    .postDate{
        position: relative;
        top:-35px;
        padding-left:75%;
        font: normal 13px 微软雅黑 ;
    }
    .passageMain{
        position: relative;
        top:5px;
        word-wrap: break-word; 
        word-break: normal; 
        width:95%;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        font: normal 15px 微软雅黑 ;
        
    }
    .media-box{
        position: relative;
        top:0;
        width: 360px;
        height:120px;
    }
    .image1{
        width: 110px;
        height: 110px;
    }
    .zan{
        width: 80px;
        height: 30px;
    }
    .collect{
        width: 80px;
        height: 30px;
    }
    .delete{
        padding-left: 18px;
        font: 13px 微软雅黑;
        border-radius: 3px;
        border: 1px solid #bbbbbb;
        width: 80px;
        height: 30px;
        background: no-repeat;
        background-image: url("img/删除.png");
        background-size: 22px 22px;
        background-position: 8px 3px;
    }
    .collect{
        padding-left: 24px;
        font: 13px 微软雅黑;
        border-radius: 3px;
        border: 1px solid #bbbbbb;
        width: 80px;
        height: 30px;
        background: no-repeat;
        background-image: url("img/shoucang.png");
        background-size: 23px 23px;
        background-position: 8px 3px;
    }
    .zan{
        padding-left: 18px;
        font: 13px 微软雅黑;
        border-radius: 3px;
        border: 1px solid #bbbbbb;
        width: 80px;
        height: 30px;
        background: no-repeat;
        background-image: url("img/点赞 .png");
        background-size: 22px 22px;
        background-position: 8px 2px;
    }
    .zanNum{
        font: 13px 微软雅黑;
        border-radius: 3px;
        border: 1px solid #bbbbbb;
        width: 80px;
        height: 30px;
        background-color: white;

    }
    .btnCol{
        margin-top: 20px;

    }
    </style>

    <script type="text/javascript">
        window.onload = function () {
        	var url=decodeURI(location.href);
        	var strs;
        	if (url.indexOf("?") != -1) {  
        	     var str = url.substr(1);  
        	     strs = str.split("&");  
        	}
        	var keyWord = strs[0].split("=")[1];
        	console.log(keyWord);
            loadResult(keyWord);
        }
    </script>

</head>
<body>

<div class="whole-container">
    <div class="theContainer">
    <!--页头部分-->
        <div class="banner">
            <img src="img/logologin.png" id="logo"/>
            <div class="searchDiv">
                <input type="text" name="keyword" id="search" placeholder=" 请输入您要搜索的关键字">
                <a onclick="searchByKeyword()" id="searchicon"></a>
            </div>
            <div id="btnLeft">
                <a  onmouseover="showList()"><div id="settingIcon"></div></a>
                <a href="per_page.html">
                    <input type="button" name="homepage" id="hpBtn" value="个人中心">
                </a>
                <a href="home_page.html"><input type="button" name="homepage" id="ppBtn" value="首页"></a>
            </div>
        </div>
    <!--这里是设置的下拉表-->
        <div id="settingList">
            <ul style="padding-left: 10px">
                <li id="changePersonalSetting">
                    <a href="edit_self.html" >编辑个人资料</a>
                </li>
                <li id="accountSetting">
                    <a href="change_pwd.html">更改密码</a>
                </li>
                <li id="logout">
                    <a onclick="zhuxiao()">退出</a>
                </li>
            </ul>
        </div>

    <!--主界面部分 固定宽度居中-->
    <div class="main">
        <!--左侧标签及浏览帖子部分-->
        <div class="left">
            <div class="postsResult" id="postsResult">

            </div>
        </div>
        <!--右侧帖子内容-->
        <div class="right">
            <div class="userResult" id="usersResult">
            </div>
        </div>


    </div>
    </div>
    <!--页脚部分-->
    <footer>
        <div id="footer">
            <div id="footText">
                <img src="img/giggleIcon.png" style="width: 20px;height: 20px;margin-bottom: -6px">
                <em style="font: 13px 微软雅黑;color: #999999;">giggle</em>
                <a href="https://www.baidu.com/" style="font: 13px 微软雅黑;color: #999999;margin-left: 15px">关于我们</a>
                <em style="font: 13px 微软雅黑;color: #999999;margin-left: 15px">© 2017 Zealers 版权所有</em>
            </div>
        </div>
    </footer>
    <!--页脚部分结束-->
</div>
</body>
</html>